使用 UIInterpolatingMotionEffect 幫我們的汽水君加上一個視差效果吧！

前言：

前面兩次教學動畫我們製作了一個汽水君的晃動效果以及背景的氣泡效果，那麼我們這一次想要加入一個效果，讓使用者甩動手機時汽水君根據手機的傾斜幅度來位移，如此一來我們這個 App 中的汽水君的效果呈現就更像我們現實的反應了。

＃UIInterpolatingMotionEffect

將設備水平或垂直傾斜映射到指定的值的對象，以便 UIKit 可以將這些值應用於視圖。

我們在設定 UIInterpolatingMotionEffect 的時候，必須設定下列兩者： 

• keyPath：要修改的視圖的關鍵路徑。 此路徑必須對應於應用此運動效果的視圖的可動畫屬性。 例如，要更新視圖的 center 屬性，請指定字符串 "center" 。
• type：所要追蹤的運動類型。 您可以追蹤水平或垂直傾斜。

設定完之後，我們還需要設定 minimumRelativeValue 以及 maximumRelativeValue ，來設定映射視圖的最大最小偏移量。

所以這邊我們來設定我們汽水君的運動效果吧：

func settingParallaxEffect(_ view: UIView) {
    // 設定我們水平跟垂直移動的值，後面會當我們的 minimumRelativeValue 與 maximumRelativeValue
    let horizonValue = view.bounds.width / 4
    let verticalValue = view.bounds.height / 4
    
    // 設定水平 UIInterpolatingMotionEffect
    // keyPath 設為中心 x，type 為 tiltAlongHorizontalAxis
    let horizontal = UIInterpolatingMotionEffect(keyPath: "center.x", type: .tiltAlongHorizontalAxis)
    horizontal.minimumRelativeValue = -horizonValue
    horizontal.maximumRelativeValue = horizonValue
    
    // 設定垂直 UIInterpolatingMotionEffect
    // keyPath 設為中心 y，type 為 tiltAlongVerticalAxis
    let vertical = UIInterpolatingMotionEffect(keyPath: "center.y", type: .tiltAlongVerticalAxis)
    vertical.minimumRelativeValue = -verticalValue
    vertical.maximumRelativeValue = verticalValue
    
    // 新增一個 UIMotionEffectGroup
    // 並將上面的 motionEffect 加入 motionGroup，加到 View 中
    let motionGroup = UIMotionEffectGroup()
    motionGroup.motionEffects = [horizontal, vertical]
    view.addMotionEffect(motionGroup)
}

讓我們來測試一下汽水君是否會跟著我們手機晃動吧！

抱歉最近嗑太兇…

後記：

雖然設定這個運動效果的程式碼很簡潔，但是設定完成之後帶來的效果其實是很特別的，許多開發者也會使用 · 來實現一些視差效果 (Parallax) ，這種根據設備反映的運動效果可以讓呈現的效果更貼近現實生活中的反應。